<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>



<div id="app1">
  {{message}}
  <mycom2></mycom2>
</div>

<script src="../js/vue.js"></script>
<script>
  const cop1=Vue.extend({
    template:`
      <div>
        <h1>标题1</h1>
        <p>内容1</p>
        <h1>结尾1</h1>
      </div>
    `
  })

  const cop2=Vue.extend({
    template: `
      <div>
        <h1>标题2</h1>
        <p>内容2</p>
        <h1>结尾2</h1>

       <mycom1></mycom1>

      </div>

    `,
      // <mycom1></mycom1>  要放在div里
    components: {
      mycom1: cop1
    }


  })


  const app1 = new Vue({
    el:"#app1",
    data: {
      message:"stupid mother fucker"
    },
    components:{
      mycom2:cop2
    }
  })

  // const app2 = new Vue({
  //   el:"#app2",
  //   data: {
  //     message:"stupid mother fucker"
  //   }
  // })

</script>



</body>
</html>